import React from 'react';
import ProForm, {
  ProFormFieldSet,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { Input, message } from 'antd';
import { history, useModel } from 'umi';

import { PreFixSpan } from '@/components/base';
import request from '@/utils/request';

import UploadAvatar from './UploadAvatar';

import styles from './BaseView.less';

const BaseView = () => {
  const { initialState } = useModel('@@initialState');
  const currentUser = initialState.currentUser;

  const updateUser = (values) => {
    request(`/api/user/${currentUser.id}`, {
      method: 'PUT',
      data: values,
    }).then((res) => {
      if (res.success) {
        message.success('更新基本信息成功');
        history.push('/code/store');
      }
    });
  };

  const handleFinish = async (values) => {
    if (values.username !== currentUser.username) {
      request('/api/current_username', {
        params: { username: values.username },
      }).then((res) => {
        res.data && message.error('用户已存在,请更换用户名');
        updateUser(values);
      });
    } else updateUser(values);
  };

  return (
    <div className={styles.baseView}>
      <>
        <div className={styles.left}>
          <ProForm
            layout="vertical"
            onFinish={handleFinish}
            submitter={{
              searchConfig: {
                submitText: '更新基本信息',
              },
              render: (_, dom) => dom[1],
            }}
            initialValues={{
              ...currentUser,
            }}
            hideRequiredMark
          >
            <ProFormText width="md" name="email" label="邮箱" disabled />
            <ProFormText
              width="md"
              name="username"
              label={<PreFixSpan>昵称</PreFixSpan>}
              rules={[
                {
                  required: true,
                  message: '请输入您的昵称!',
                },
              ]}
            />
            <ProFormTextArea
              name="desc"
              label="个人简介"
              placeholder="个人简介"
            />
            <ProFormSelect
              width="md"
              name="gender"
              label="性别"
              options={[
                { label: '女', value: '0' },
                { label: '男', value: '1' },
                { label: '保密', value: '2' },
              ]}
            />
            <ProFormText width="md" name="address" label="所在地址" />
            <ProFormText width="md" name="industry" label="行业" />
            <ProFormFieldSet
              name="phone"
              label="联系电话"
              rules={[
                {
                  pattern: /^[1][3,4,5,6.7,8,9][0-9]{9}$/,
                  message: '请输入正确的手机号',
                },
              ]}
            >
              <Input className={styles.phone_number} />
            </ProFormFieldSet>
          </ProForm>
        </div>
        <div className={styles.right}>
          <UploadAvatar
            avatarUrl={currentUser.avatarUrl || '/public/avatar.webp'}
          />
        </div>
      </>
    </div>
  );
};

export default BaseView;
